<script setup lang="ts">
import { computed } from "vue";
import { NumberUtils } from "../../src/utils";
import { useCacheStore } from "../../src/sde/cache";
import UniverseTypeIcon from "~components/universe-type/UniverseTypeIcon.vue";
import UniverseTypePrice from "~components/universe-type/UniverseTypePrice.vue";

const props = defineProps<{ id: number }>();

const cacheStore = useCacheStore();

const materials = computed(() => {
  const type = cacheStore.getType(props.id)!;

  return (
    type.blueprint?.manufacturing?.materials ??
    type.materials.map((item) => ({ id: item.type.id, name: item.type.name, quantity: item.quantity }))
  );
});
</script>

<template>
  <el-descriptions :column="1" border>
    <el-descriptions-item v-for="item in materials" :key="item.id" :label="item.name">
      <template #label>
        <span class="flex items-center space-x-1">
          <UniverseTypeIcon :id="item.id" />
          <UniverseTypePrice :id="item.id" :show-price="false" />
        </span>
      </template>
      {{ NumberUtils.readableText(item.quantity) }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss"></style>
